
import './index.less'
const CanvasPage = (props) => {
  const {headerLeft, headerCenter, headerRight, contentLeft, contentCenter, contentRight} = props

  return <div className="canvas-page">
    <div className="canvas-page-header canvas-page-row">
      <div className="page-row-left">
        { headerLeft }
      </div>
      <div className="page-row-center">
        { headerCenter }
      </div>
      <div className="page-row-right">
        { headerRight }
      </div>
    </div>
    <div className="canvas-page-content canvas-page-row">
      <div className="page-row-left">
        { contentLeft }
      </div>
      <div className="page-row-center">
        { contentCenter }
      </div>
      <div className="page-row-right">
        { contentRight }
      </div>
    </div>
    { props.children }
  </div>
}

CanvasPage.displayName = 'CanvasPage';

export default CanvasPage;